a<template>
    <div class="line64">
        <article>
            <div class="blank pics"></div>
            <div class="leftbox">
                <nuxt-child/>
            </div>
            <div class="right">
                <ul id="title">
                    <li v-for="item in title" :id="item.id" @click="click(item.id)">{{item.name}}</li>
                </ul>
            </div>
        </article>
    </div>
</template>

<script>
    export default {
        name: "PersonCenter",
        data() {
            return {
                reverse: true,
                title:[],
                clickTitle: 1
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {
               this.title = this.$store.getters["user/getUserFunction"];
                this.$nextTick(()=>{
                    this.nowTtile();
                })
            },
            nowTtile() {
                let attribute = document.querySelectorAll("#title>li");

                for (let attributeElement of attribute) {
                    if (attributeElement.id == this.clickTitle) {

                        attributeElement.className = "choicetitle";
                    } else {
                        attributeElement.className = "";
                    }
                }
                switch (this.clickTitle) {
                    case 1:
                        this.$router.push({name:"PersonData"});
                        break;
                    case 2:
                        this.$router.push({name:"PersonComment"});
                        break;
                    case 3:
                        this.$router.push({name:"MyResponse"});
                        break;
                    case 4:
                        this.$router.push({name:"MyLike"});
                        break;
                    case 5:
                        this.$router.push({name:"MyCollect"});
                        break;
                    case 6:
                        this.$router.push({name:"MyBlog"});
                        break;
                    case 7:
                        this.$router.push({name:"MyAttention"});
                        break;
                    case 8:
                        this.$router.push({name:"MyFans"});
                        break;
                }
            },
            click(id) {
                this.clickTitle = id;
                this.nowTtile();
            }
        }
    }
</script>

<style scoped>

    .typeTitle li {
        list-style: none;
        display: inline-block;
        margin: 10px 8px 0 0;

    }

    .leftbox {
        float: right;
    }

    .right {
        margin-left: 100px;
        margin-top: 30px;
        width: 10%;
        min-height: 777px;
    }

    .right > ul {
        background: white;
        text-align: center;
        border-radius: 1%;
    }

    .right > ul > li {
        height: 30px;
        padding-top: 10px;
    }

    .right > ul > li:hover {
        background-color: rgba(227, 62, 51, .2);
        cursor: pointer;
        color: orangered;
        border-radius: 4px;
    }
    .choicetitle{
        color: orangered;
    }
</style>